import React from 'react'
import { Drawer, Popconfirm, Button, Form, Input, Tree, message } from 'antd'
import { getRoleMenuApi, addRoleApi, editRoleApi } from '../../../apis/system'
import { getAllMenusApi } from '../../../apis/menus';
import { CrownOutlined, BookOutlined, ClockCircleOutlined, TrophyOutlined } from '@ant-design/icons'

const { TextArea } = Input;
export default function EditUser(props) {
    const formRef = React.useRef(null)
    const { visible, curRoleInfo, lookOrEdit } = props
    const [expandedKeys, setExpandedKeys] = React.useState([]);
    const [checkedKeys, setCheckedKeys] = React.useState([]);

    const [autoExpandParent, setAutoExpandParent] = React.useState(true);
    const [treeData, setTreeData] = React.useState([])
    const onExpand = (expandedKeysValue) => {
        setExpandedKeys(expandedKeysValue);
        setAutoExpandParent(false);
    };
    const onCheck = (checkedKeysValue) => {
        console.log('onCheck', checkedKeysValue);
        setCheckedKeys(checkedKeysValue);
    };



    React.useEffect(() => {
        getAllMenus()
    }, [])

    function getAllMenus() {
        getAllMenusApi().then(res => {
            const rows = handleMenus(res.rows.children)
            setTreeData(rows)
        })
    }

    function handleMenus(menus) {
        return menus.map(item => {
            const o = {
                title: item.title,
                key: item.id,
            }
            if (item.children) {
                o.children = handleMenus(item.children);
            }
            return o;
        })
    }

    function onClose(flag) {
        props.closeDrawer(flag)
    }

    function onFinish(values) {
        console.log(values);
        values.menuId = checkedKeys.join(',')
        if (checkedKeys.length) {
            if (!curRoleInfo) {
                addRoleApi({ ...values }).then(() => {
                    message.success('添加成功')
                    onClose('update')
                })
            } else {
                editRoleApi({ ...values, roleId: curRoleInfo.roleId }).then(() => {
                    message.success('修改成功')
                    onClose('update')
                })
            }
        } else {
            message.error('请选择权限')
        }

    }

    // console.log(props);
    React.useEffect(() => {
        if (visible) {
            if (curRoleInfo) {
                getRoleMenuApi(curRoleInfo.roleId).then(res => {
                    // console.log(res);
                    formRef.current?.setFieldsValue({
                        ...props.curRoleInfo,
                    })
                    // setSelectedKeys(res);
                    setCheckedKeys(res);
                })

            }
        } else {
            formRef.current?.resetFields()
            setCheckedKeys([])
        }
    }, [visible])
    return (
        <div>
            <Drawer
                title={!props.curRoleInfo ? '新增角色' : lookOrEdit ? '查看角色' : '修改角色'}
                placement="right"
                onClose={onClose}
                open={props.visible}
                closable={false}
                size={'large'}
                headerStyle={{ fontWeight: '100' }}

                footer={
                    <div>
                        <Popconfirm
                            title="确定是否关闭"
                            onConfirm={onClose}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button style={{ marginRight: '20px' }}>取消</Button>
                        </Popconfirm>

                        <Button type='primary' onClick={() => formRef.current.submit()}>确定</Button>
                    </div>
                }
                footerStyle={{ textAlign: 'right', display: lookOrEdit ? 'none' : '' }}
            >
                {
                    !lookOrEdit ? <Form
                        labelCol={{
                            span: 4,
                        }}
                        wrapperCol={{
                            span: 14,
                        }}
                        layout="horizontal"
                        onFinish={onFinish}
                        ref={formRef}
                    >
                        <Form.Item
                            label="角色名称"
                            name='roleName'
                            rules={[
                                {
                                    required: true
                                }
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item label='角色描述' name='remark'>
                            <TextArea rows={4} />
                        </Form.Item>
                        <Form.Item label='权限选择' name='menuId'>
                            <Tree
                                checkable
                                onExpand={onExpand}
                                expandedKeys={expandedKeys}
                                autoExpandParent={autoExpandParent}
                                onCheck={onCheck}
                                checkedKeys={checkedKeys}
                                treeData={treeData}
                            />
                        </Form.Item>
                    </Form> : <div className='role-drawer'>
                        <p><CrownOutlined />角色名称：{curRoleInfo.roleName}</p>
                        <p><BookOutlined />角色描述：{curRoleInfo.remark}</p>
                        <p><ClockCircleOutlined />创建时间：{curRoleInfo.createTime}</p>
                        <p><ClockCircleOutlined />修改时间：{curRoleInfo.modifyTime}</p>
                        <p><TrophyOutlined />所拥有的权限：</p>
                        <Tree
                            checkable
                            onExpand={onExpand}
                            expandedKeys={checkedKeys}
                            autoExpandParent={autoExpandParent}
                            onCheck={onCheck}
                            checkedKeys={checkedKeys}
                            treeData={treeData}
                            defaultExpandedKeys={checkedKeys}
                        />
                    </div>
                }


            </Drawer>
        </div>
    )
}
